<template>
  <div class="LayoutPage">
    <div class="container-outer">
      <el-row :gutter="20" v-if="ifSpecial">
        <el-col :span="2" v-for="(item, index) in btnList1" :key="index"
          ><el-button type="success" plain @click="goto(item)">{{
            item.name
          }}</el-button></el-col
        >
      </el-row>
      <el-row :gutter="20" v-if="ifBaike">
        <el-col :span="2" v-for="(item, index) in btnList2" :key="index"
          ><el-button type="success" plain @click="goto(item)">{{
            item.name
          }}</el-button></el-col
        >
      </el-row>
      <el-header v-if="ifabout">
        <slot name="title"></slot>
      </el-header>
      <el-container class="container-inner">
        <el-aside width="20%">
          <slot name="input"></slot>
          <slot name="tree"></slot>
          <slot name="menu"></slot>
        </el-aside>
        <el-main>
          <slot name="main"></slot>
          <slot name="card"></slot>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LayoutPage',
  props: {
    "ifheader": {
      type: Boolean,
      default: false
    },
    "ifSpecial": {
      type: Boolean,
      default: false
    },
    "ifBaike": {
      type: Boolean,
      default: false
    },
    "ifabout": {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      btnList1: [
        {
          name: "岭南水果",
          path: '/home'
        },
        {
          name: "药用植物",
          path: '/home'
        },
        {
          name: "经济作物",
          path: '/home'
        },
      ],
      btnList2: [
        {
          name: "植物之最",
          path: '/research'
        },
        {
          name: "植物一问",
          path: ''
        },
        {
          name: "植物典故",
          path: ''
        },
        {
          name: "植物趣闻",
          path: ''
        },
        {
          name: "植物栽培",
          path: '/search'
        },
      ]
    };
  },
  methods: {
    goto (item) {
      this.$router.push(item.path);
    }


  }
};
</script>
<style scoped>
.LayoutPage {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: rgb(242, 242, 242);
}
.title {
  height: 10%;
  font-size: 40px;
  font-weight: bold;
  background: #56ab2f; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #a8e063,
    #56ab2f
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #a8e063,
    #56ab2f
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.title p {
  display: inline-block;
  margin: 0px;
  margin-left: 20px;
  padding: 9px 0px 40px 0px;
  color: white;
}
.header {
  width: 100%;
  height: 8%;
  margin: 0;
  padding: 0;
  box-shadow: 5px 5px 20px hsla(0, 0%, 86.7%, 0.5);
}
.container-outer {
  /* height: 88%;
  padding: 20px; */
  height: 100%;
}
.container-inner {
  height: 90%;
  width: 100%;
  margin-top: 20px;
}
.container-inner .el-aside {
  height: 100%;
  box-shadow: 5px 5px 20px hsla(0, 0%, 86.7%, 0.5);
  background-color: #fff;
  margin-right: 20px;
}
.container-inner .el-main {
  height: 100%;
  background-color: #fff;
}
</style>
